<template>
  <div class="lix-cou__container" v-if="classInfo">
    <div class="lix-cou__header">
      <div class="lix-cou__show">
        <image :src="classInfo.thumb" alt="" />
        <div class="info">
          <p class="title">{{ classInfo.name }}</p>
          <p class="price"><span>￥</span>{{ classInfo.price }}</p>
        </div>
      </div>
      <div class="lix-cou__teacher" v-if="teacherInfo">
        <image class="avatar" :src="teacherInfo.avatar" @click="go2TeacherPage"/>
        <div class="right-view">
          <div class="right-top">
            <div class="teacher-wrap" @click="go2TeacherPage">
                <div>主讲老师：{{ teacherInfo.name }}</div>
                <image  v-if="teacherInfo.gender === 1" src="../../static/image/man.png"/>
                <image  v-else src="../../static/image/women.png" alt="" />
            </div>
            <div class="follow" v-if="!isFollowed">
              <button @click="follow">+ 关注</button>
            </div>
            <div class="follow is-followed" v-else>
              <button @click="follow">已关注</button>
            </div>
          </div>
          <div class="desc">{{ teacherInfo.description }}</div>
          <van-rate class="rate" v-model="teacherInfo.grade" :size="13" disabled disabled-color="#ff6c60"/>
        </div>
      </div>
    </div>
    <div class="lix-cou__content">
      <div class="class-desc">
        <div class="desc-header">
          <div class="seperate"></div>
          <div>课程简介</div>
        </div>
        <div class="desc-content">
          <p>开课时间：{{ classInfo.begintime }}</p>
          <p>课程人数: {{ classInfo.limit }}</p>
          <p>课程时长: {{ classInfo.duration }}</p>
          <p>主要面向群体年龄：{{ classInfo.age_range }}</p>
          <p>开课地点：{{ classInfo.place }}</p>
        </div>
      </div>
      <div class="class-detail">
        <div class="detail-header">
          <div class="seperate"></div>
          <div>课程详情</div>
        </div>
        <div class="detail-content" v-html="rawHtml"></div>
        <div class="fixed-view"></div>
      </div>
    </div>
    <div class="lix-cou__fixed">
      <div class="fixed-container">
        <button class="first-btn" @click="callPhone">
          <image src="../../static/image/call.png" alt="" />
          <a>客服</a>
        </button>
        <button class="second-btn" @click="showPaymentControl" v-if="btnText === '在线报名'">{{ btnText }}</button>
        <button class="second-btn disabled" v-else>{{ btnText }}</button>
      </div>
    </div>
    <div class="lix-cou__alertbg" v-if="showPayView">
      <div class="lix-cou__alert">
        <image class="close" src="../../static/image/close.png" @click="hidePayView"/>
        <div class="title">选择支付方式</div>
        <div class="price">￥{{classInfo.price}}</div>
        <div class="sperate"></div>
        <div class="logo">
          <div class="left">
            <image src="../../static/image/wechat.png" />
            <div>微信</div>
          </div>
          <radio value="微信" :checked="true" color="#fd774d"/>
        </div>
        <div class="submit">
          <button @click="orderCreate">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCourseDetail, followApi, orderCreateApi } from '../../api';
import Tip from '../../utils/tips';

export default {
  data() {
    return {
      classInfo: null,
      teacherInfo: null,
      isFollowed: true,
      rawHtml: '',
      classId: null,
      showPayView: false,
      btnText: '在线报名'
    };
  },
  onLoad(option) {
    console.log(option);
    this.classId = option.classid;
    this.getClassInfo(this.classId);
  },
  onShareAppMessage(res) {
    console.log(res);
    return {
      title: this.classInfo.share.title,
      path: '/pages/index/courseDetail?classid=' + this.classInfo.id
    };
  },
  methods: {
    share() {
    },
    getClassInfo(id) {
      // const classId = 1
      console.log(this.classId);
      getCourseDetail(id)
        .then(res => {
          this.classInfo = res.data;
          this.teacherInfo = res.data.teacher;
          this.isFollowed = res.data.teacher.followed;
          this.rawHtml = res.data.body;
          // 判断支付状态 修改底部文字
          if (this.classInfo.order && this.classInfo.order.ispay) {
            console.log('修改按钮文字');
            this.btnText = '已报名';
          } else {
            if (!this.classInfo.can_enroll) {
              this.btnText = '报名已截止';
            } else {
              this.btnText = '在线报名';
            }
          }

          console.log(res);
        })
        .catch(e => {
          console.log(e);
        });
    },
    follow() {
      // const schoolId = this.$route.params.id
      const teacherId = this.teacherInfo.id;
      followApi({
        model: 'teacher',
        model_id: teacherId
      })
        .then(res => {
          this.isFollowed = res.data;
          console.log(res);
        })
        .catch(e => {
          console.log(e);
        });
    },
    showPaymentControl() {
      this.showPayView = true;
    },
    hidePayView() {
      this.showPayView = false;
    },
    callPhone() {
      console.log('拨打电话');
      wx.makePhoneCall({
        phoneNumber: this.classInfo.service_telephone,
        success: function(res) {
          console.log('拨打成功');
        },
        fail: function(e) {
          console.log('拨打失败');
          console.log(e);
        }
      });
    },
    orderCreate() {
      const self = this;
      orderCreateApi({
        paymode: 'wechat',
        course_id: this.classInfo.id,
        partner_id: 2
      })
        .then(res => {
          console.log(res);
          self.createWechatPay(res.data.wechat);
        });
    },
    createWechatPay(data) {
      const self = this;
      console.log('调起微信支付');
      console.log(data);
      wx.requestPayment({
        'timeStamp': data.timeStamp,
        'nonceStr': data.nonceStr,
        'package': data.package,
        'signType': data.signType,
        'paySign': data.paySign,
        'success': function(res) {
          console.log(res);
          Tip.success('支付成功');
        },
        'fail': function(res) {
          console.log('fail');
          console.log(res);
          Tip.error(res.err_desc);
        },
        'complete': function(res) {
          console.log('complete');
          console.log(res);
          self.showPayView = false;
          self.getClassInfo(self.classId);
        }
      });
    },
    go2TeacherPage() {
      wx.navigateTo({
        url: '/pages/index/teacher?id=' + this.teacherInfo.id
      });
    }
  }
};
</script>

<style lang="scss">
p {
  margin: 0;
}
.lix-cou__container {
  background-color: #fff;
  min-height: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;

  & .lix-cou__header {
    width: 100%;
    & .lix-cou__show {
      display: flex;
      flex-direction: row;
      padding: 10px;
      background-color: #f3f3f3;
      & image {
        width: 171px;
        height: 101px;
      }
      & .info {
        & .title {
          font-size: 16px;
          color: #292929;
          font-weight: 900;
          max-width: 170px;
          margin-left: 10px;
        }

        & .price {
          margin-top: 40px;
          margin-left: 10px;
          font-size: 14px;
          color: #ff0036;
          & span {
            font-size: 10px;
          }
        }
      }
    }

    & .lix-cou__teacher {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 17px 11px 14px 9px;
      border-bottom: 1px solid #f3f3f3;
      & .avatar {
        display: block;
        width: 60px;
        height: 60px;
        border: 6px solid #eff3f9;
        border-radius: 50%;
        border-radius: 60px;
      }

      & .right-view {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 10px;

        & .right-top {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          & .teacher-wrap {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #5a5a5a;
            & image {
              height: 14px;
              width: 14px;
              border-radius: 3px;
              margin-left: 5px;
            }
          }

          & button {
            height: 18px;
            min-width: 53px;
            line-height: 18px;
            font-size: 11px;
            color: #ff9891;
            border: 1px solid #ff9891;
            border-radius: 9px;
            background-color: #fff;
          }
          & .follow {
            & button {
              height: 18px;
              min-width: 53px;
              line-height: 18px;
              font-size: 11px;
              color: #ff9891;
              border: 1px solid #ff9891;
              border-radius: 9px;
              background-color: #fff;
            }
          }
          & .is-followed {
            & button {
              color: #d3d3d3;
              border: 1px solid #d3d3d3;
            }
          }
        }

        & .desc {
          margin: 7px 0;
          font-size: 13px;
          color: #999999;
        }
      }
    }
  }
  .lix-cou__content {
    // width: 100%;
    padding: 16px 13px 10px 10px;
    padding-right: 13px;
    padding-left: 10px;

    & .class-desc {
      font-size: 15px;
      color: #404040;
      font-weight: 900;
      & .desc-header {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      & .desc-content {
        margin-top: 18px;
        font-size: 13px;
        color: #606060;
        font-weight: 400;
      }
    }

    .seperate {
      width: 4px;
      height: 15px;
      margin-right: 10px;
      background-color: #ff0036;
    }

    & .class-detail {
      margin-top: 22px;
      font-size: 15px;
      color: #404040;
      font-weight: 900;
      & .detail-header {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      & .detail-content {
        margin-top: 18px;
        font-weight: 400;
      }

      & .fixed-view {
        height: 45px;
      }
    }
  }

  .lix-cou__fixed {
    width: 100%;
    position: fixed;
    z-index: 1000;
    bottom: 0;
    height: 45px;

    & .fixed-container {
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      & button {
        border-radius: 0;
      }
      .first-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        margin-right: 1rpx;
        width: 68px;
        & image {
          width: 25px;
          height: 25px;
        }
        font-size: 13px;
        color: #fff;
        background-color: #f8b551;
        border: none;
        & a {
          color: #fff;
          font-size: 12px;
          line-height: 20px;
          height: 20px;
        }
      }
      & .second-btn {
        height: 100%;
        flex: 1;
        font-size: 19px;
        color: #fff;
        background-color: #fd774d;
        border: none;
      }

      & .disabled {
        background-color: #C0C0C0;
      }
    }
  }
  .lix-cou__alertbg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background-color: rgba(0,0,0,.8);
  }
  .lix-cou__alert {
    position: absolute;
    top: 15%;
    left: 15px;
    right: 15px;
    height: 332px;
    background: #fff;

    display: flex;
    flex-direction: column;
    border-radius: 5px;

    text-align: center;
    font-size: 21px;
    color: #000;

    & .close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 20px;
      height: 20px;
    }

    & .price {
      margin-top: 15px;
      font-size: 18px;
      color: #ff0036;
    }

    & .logo {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-left: 33px;
      margin-right: 33px;
      & .left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
        & > div {
          margin-left: 24px;
        }
      }
      & image {
        width: 45px;
        height: 45px;
      }
    }

    & button {
      background: #fd774d;
      color: #fff;
      border-radius: 3px;
    }

    & .submit {
      // padding: 0 10px;
      width: 568rpx;
      margin: 0 auto;
      margin-top: 40px;
    }

    & .title {
      font-weight: 900;
      margin-top: 25px;
    }

    & .sperate {
      width: 568rpx;
      height: 1rpx;
      background: #cccccc;
      margin: 0 auto;
      margin-top: 23px;
      margin-bottom: 23px;
    }
  }
}
</style>
